<template>
    <view class="container">
        <view class="avatar">
            <image src="/static/images/avatar.png"></image>
        </view>

        <view class="form">
            <u--form labelPosition="left" :model="business" :rules="rules" ref="uForm">

                <u-form-item label="手机" prop="mobile" borderBottom>
                    <u--input v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
                </u-form-item>

                <u-form-item label="密码" prop="password" borderBottom>
                    <u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
                </u-form-item>

                <view style="margin-top: 25px;">
                    <u-button type="warning" @click="submit">登录</u-button>
                </view>

                <view class="btn" @click="ToPagesIndex">
                    首页
                    <u-icon name="arrow-rightward"></u-icon>
                </view>
            </u--form>
        </view>
		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
export default {
    data() {
        return {
            business:{
                mobile:'',
                password:''
            },
            rules:{
				mobile: [
				{
				    // 自定义验证函数，见上说明
				    validator: (rule, value, callback) => {
				        // 上面有说，返回true表示校验通过，返回false表示不通过
				        // uni.$u.test.mobile()就是返回true或者false的
				        if (value) {
				            return uni.$u.test.mobile(value);
				        } else {
				            return false;
				        }
				    },
				    type: 'string',
				    required: true,
				    message: '手机号码不正确',
				    // 触发器可以同时用blur和change
				    trigger: ['change', 'blur'],
				}],
				'password': {
				    type: 'string',
				    required: true,
				    message: '请填写密码',
				    trigger: ['blur', 'change']
				},
			}
        }
    },
	onReady() {
		//onReady 为uni-app支持的生命周期之一
		this.$refs.uForm.setRules(this.rules)
	},
    methods: {
        submit()
        {
			this.$refs.uForm.validate().then(async() => {
				
				let result = await this.$u.api.webLogin({
					mobile: this.business.mobile,
					password: this.business.password
				})
				if(result.code == 1)
				{
					this.$refs.uToast.show(
					{
						type: 'success',
						icon: false,
						message: result.msg,
						complete: () =>{
							//本地存储用户信息
							uni.setStorageSync('business', result.data);
							uni.$u.route({
								url: 'pages/business/index',
							})
						}
					})
				}
				else
				{
					this.$refs.uToast.show(
					{
						type: 'error',
						icon: false,
						message: result.msg
					})
				}
			}).catch(errors => {})
        },
        ToPagesIndex()
        {
            uni.$u.route({
        		type: 'switchTab',
        		url: 'pages/validate/validate',
        	})
        }
    },
}
</script>

<style>
page{
    background-color: #f8fafe;
}

.container .avatar {
    text-align: center;
    background-color: #fff;
}

.avatar image{
    width: 120px;
    height: 120px;
    margin: 50px 0;
    border-radius: 50%;
}

.form{
    margin: 0 50rpx;
    box-sizing: border-box;
}

.btn{
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-icon{
    margin-left: 10px;
}
</style>